<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/calendar.js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .calendar-container {
            width: 400px;
            min-width: 250px;
            /* min-height: 400px; */
            background-color: #f6f6f6;
            padding: 20px;
            margin: 50px auto;
        }

        .calendar-header {
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: flex;
        }

        .calendar-header .prev,
        .calendar-header .next {
            width: 40px;
            height: 40px;
        }

        .calendar-header .date-show {
            flex: 1;
        }

        .calendar-title {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .calendar-title li {
            width: -webkit-calc(100% / 7);
            border: 1px solid #333;
            box-sizing: border-box;
        }

        /* 除了第一个以外所有的li */
        .calendar-title li+li {
            border-left: 0;
        }

        .calendar-list {
            display: flex;
            flex-wrap: wrap;
            line-height: 40px;
            text-align: center;
        }

        .calendar-list li {
            width: -webkit-calc(100% / 7);
            border: 1px solid #333;
            border-top: 0;
            box-sizing: border-box;
        }

        /* 除了第一列以外所有的li */
        .calendar-list li:not(:nth-child(7n+1)) {
            border-left: 0;
        }

        .pr,
        .ne {
            background-color: #999;
        }

        .cur {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <!-- 
        &nbsp;   空格(一个英文大小)
        &emsp;   全角空格(一个中文大小)
        &ensp;   半角空格(半个中文大小)
        &lt;     <
        &gt;     >
    -->

    <div class="calendar-container">
        <div class="calendar-header">
            <div class="prev">&lt;</div>
            <div class="date-show">xxxx年xx月</div>
            <div class="next">&gt;</div>
        </div>
        <ul class="calendar-title">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <ul class="calendar-list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
            <li>41</li>
            <li>42</li>
        </ul>
    </div>
</body>

<script>

    var calendarList = document.getElementsByClassName("calendar-list")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
    var dateShow = document.getElementsByClassName("date-show")[0];

    // 全局变量   1. 默认为页面加载时的当前时间
    var date = new Date();

    // 日期展示
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    dateShow.innerText = `${year}年${month}月`;

    // 日历动态生成
    var week = getFirstDayWeek(date);
    week = week == 0 ? 7 : week;
    console.log(week);

    var lastMonthDays = getLastMonthDays(date);
    console.log(lastMonthDays);

    var thisMonthDays = getThisMonthDays(date);
    console.log(thisMonthDays);

    var html = ""; //用于拼接所有的li

    // 上个月
    for (var i = lastMonthDays - (week - 1) + 1; i <= lastMonthDays; i++) {
        html += `<li class="pr">${i}</li>`
    }

    // 当前月
    for (var i = 1; i <= thisMonthDays; i++) {
        html += `<li class="cur">${i}</li>`
    }

    // 下个月
    for (var i = 1; i <= 42 - (week - 1) - thisMonthDays; i++) {
        html += `<li class="ne">${i}</li>`
    }

    calendarList.innerHTML = html;




</script>

</html>